8f:I[903690,["/chat-static/_next/static/chunks/207k4irufuy1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xnpnq2yv_y5u.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1oslv0c4p1hes.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3egyb5cbfet-b.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3fbsfek8pd--1.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0gl0monphc_1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32nvcog1s7wsq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3a-9evtevbng4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1848vponakflr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/207k4irufuy1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xnpnq2yv_y5u.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1oslv0c4p1hes.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3egyb5cbfet-b.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3fbsfek8pd--1.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/0gl0monphc_1q.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/32nvcog1s7wsq.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3a-9evtevbng4.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN","/chat-static/_next/static/chunks/1848vponakflr.js?dpl=dpl_7ipFKqLPBgcbMdnF5fA9FDUDf8TN"],"SWRDataProvider"] 91:T2a7f,[V0_FILE]typescriptreact:file="components/kokonutui/card-08.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" import Image from "next/image" import Link from "next/link" export interface Card08Props { title?: string subtitle?: string image?: string badge?: { text: string variant: "pink" | "indigo" | "orange" } href?: string } export default function Card08({ title = "Modern Design Systems", subtitle = "Explore the fundamentals of contemporary UI design", image = "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg", badge = { text: "New", variant: "orange" }, href = "https://kokonutui.com/", }: Card08Props) { return (

{badge.text}

{title}

{subtitle}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import CardGrid from "@/components/kokonutui/card-grid" export default function Home() { // Sample collection data const collections = [ { title: "Summer Dress Collection", subtitle: "Fit with the latest trends", image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmXFtkNH6GJy581VwChHZeQF6qfQM9bkLhF2kDh1px5qKB?auto=format&w=1500", title: "Autumn Essentials", subtitle: "Warm and cozy for the colder months", badge: { text: "New", variant: "orange", }, }, { image: "https://www.lummi.ai/api/pro/image/a06ede0d-63fb-4d99-be4c-9ba0840cf779?asset=original&cb=1nK52A&auto=format&w=1500", title: "Winter Collection", subtitle: "Colorful for the festive season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmPdy3qFqQF8gDQ6KuuUrRaqez3cbdeaYw3GMrxBynLfGd?auto=format&w=1500", title: "Spring Accessories", subtitle: "Hidden treasures for the spring season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", title: "Holiday Special", subtitle: "Simple.", badge: { text: "New", variant: "orange", }, }, ] return (

) } [V0_FILE]typescriptreact:file="components/kokonutui/card-grid.tsx" isEdit="true" import Card08, { type Card08Props } from "./card-08" interface CardGrid { items: Card08Props[] gridTitle?: string } const collections: Card08Props[] = [ { title: "Summer Dress Collection", subtitle: "Fit with the latest trends", image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmXFtkNH6GJy581VwChHZeQF6qfQM9bkLhF2kDh1px5qKB?auto=format&w=1500", title: "Autumn Essentials", subtitle: "Warm and cozy for the colder months", badge: { text: "New", variant: "orange", }, }, { image: "https://www.lummi.ai/api/pro/image/a06ede0d-63fb-4d99-be4c-9ba0840cf779?asset=original&cb=1nK52A&auto=format&w=1500", title: "Winter Collection", subtitle: "Colorful for the festive season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmPdy3qFqQF8gDQ6KuuUrRaqez3cbdeaYw3GMrxBynLfGd?auto=format&w=1500", title: "Spring Accessories", subtitle: "Hidden treasures for the spring season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", title: "Holiday Special", subtitle: "Simple.", badge: { text: "New", variant: "orange", }, }, ] export default function CardGrid({ items = collections, gridTitle = "Collections 2025 - Summer" }: CardGrid) { if (!items || items.length === 0) { return (

No items to display.

) } return (

{gridTitle && (

{gridTitle}

)}

Explore the latest collections for the summer season.

{items.map((item, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/card/card-08.tsx" isDeleted="true" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" import Image from "next/image" import Link from "next/link" export interface Card08Props { title?: string subtitle?: string image?: string badge?: { text: string variant: "pink" | "indigo" | "orange" } href?: string } export default function Card08({ title = "Modern Design Systems", subtitle = "Explore the fundamentals of contemporary UI design", image = "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg", badge = { text: "New", variant: "orange" }, href = "https://kokonutui.com/", }: Card08Props) { return (

{badge.text}

{title}

{subtitle}

) }85:["$","$L8f",null,{"chatId":"eqzb0IvitWZ","children":["$","$L90",null,{"data":{"@\"active-block\",\"eqzb0IvitWZ\",":{"id":"b_pGyw35OICRv","messageId":"9TXz0lN6mR4FbuK4gK2bhKB3BZHCynWo","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"eqzb0IvitWZ\",":false,"":null},"children":"$L92"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This